<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
    <script type="module" src="jumps.js"></script>
</head>

<body>
    <div class="back hide">
        <div class="circle">
            返回
        </div>
    </div>
    <div class="col">
        <h2>片段/条</h2>

        <!---->

        <p>
            <pre>显示对音频有反应的一系列分段/线条/条形图。
            
代表音频提供者输出的值。音频条的数量也受音频提供者的控制。
</pre>
        </p>
        <h4>属性</h4>
        <hr>
        <!---->
        <dl>
            <dt>通用元素属性</dt>
            <dd>
                <p>参见 <a href="local://customization_general">通用属性</a>。</p>
            </dd>

            <hr>
            Sure, here's the translation:

            <dt id="flipInput">翻转输入</dt>
            <dd>
                <p>在起始和结束之间翻转值。</p>
            </dd>
            <dt id="heightScale">高度</dt>
            <dd>
                调整高度值。最终的高度通常由 <property query="heightScale">高度</property> + <property>高度倍率</property>(参见<a
                    href="local://customization_segment_renderers">片段渲染器</a>)。</p>
            </dd>
            <dt id="minHeightScale">最小高度</dt>
            <dd>
                <p>允许的最小高度值。</p>
            </dd>
            <dt id="ShapePath">形状路径</dt>
            <dd>
                <p>定义条/线的形状。<br><br>
                    <value>水平线</value> - 直线<br>
                    <value>圆形</value> - 圆形或弧线<br>
                    <value>多边形</value> - 三角形、矩形、五边形等..<br>
                    <value>字母</value> - 字母（A-Z）和数字。当前打开的艺术家或歌曲名称的首字母将被显示。
                </p>
            </dd>
            <dt id="colorBlendOffset">颜色混合偏移</dt>
            <dd>
                <p>移动颜色混合的中心点（<property query="">起始颜色</property>、<property query="">结束颜色</property>参见 <a
                        href="local://customization_segment_renderers">分段渲染器</a>）。</p>
            </dd>
            <dt id="Segment1">分段 1</dt>
            <dd>
                <p>设置第一个渲染器（例如 条形 或 线）。条/线将沿着指定的 <property query="ShapePath">形状路径</property>排列。<br><br>参见 <a
                        href="local://customization_segment_renderers">分段渲染器</a>。</p>
            </dd>
            <dt id="Segment2">分段 2</dt>
            <dd>
                <p>设置第二个渲染器。通常用于更有效地创建外观不同的条。也可以通过添加另一个 "条形" 元素来实现相同的效果。<br><br>参见 <a
                        href="local://customization_segment_renderers">分段渲染器</a>。</p>
            </dd>

            <hr>
            <dt id="softness">平滑度</dt>
            <dd>
                <p>使输出变得柔软/平滑。</p>
            </dd>
            <dt id="reactionDelay">反应延迟</dt>
            <dd>
                <p>通过获取旧帧的值来延迟对音频的反应。</p>
            </dd>
            <dt id="reactionAccumulatedDelay">累积反应延迟</dt>
            <dd>
                <p>通过获取旧帧的平均值来延迟对音频的反应。</p>
            </dd>
            <dt id="audioProviderIndex">音频提供者索引</dt>
            <dd>
                <p>如果有多个 <a class="jump" href="local://element_audio_provider">音频分析器</a> 元素，可选择要用作输入的元素。</p>
            </dd>

        </dl>
        <!---->
    </div>


    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>


</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;

    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');

    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            if (index == 0)
                target.scrollIntoView()
        }

    } else {
        console.log('No fragment in URL.');
    }

    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    var hide

    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })

            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0 && !isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }
</script>

</html>